<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="20" class="card-box">
        <!-- <el-cascader
          class="region"
          v-model="brandList"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          style="width: 350px; height: 30px"
        >
        </el-cascader> -->

        <el-select
          v-model="brandList"
          multiple
          placeholder="选择品牌"
          filterable
          style="width: 300px"
          size="mini"
        >
          <el-option
            v-for="dict in dict.type.sys_product_pp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-radio-group v-model="dateType" size="small">
          <el-radio-button
            v-for="(item, index) in typeArr"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-col>
    </el-row>

    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="经营概况" name="0">
        <div v-if="activeName == 0">
          <section id="section1">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="6">
                <el-card>
                  <div
                    slot="header"
                    style="display: flex; justify-content: space-between"
                  >
                    <span
                      ><i class="el-icon-collection"></i>
                      {{ query.brandList + " "
                      }}{{ weekType | state1 }}经营概况</span
                    >
                    <el-radio-group
                      v-model="weekType"
                      size="mini"
                      @change="getweekselectSaleSingle(weekType)"
                    >
                      <el-radio-button
                        v-for="(item, index) in weekArr"
                        :key="index"
                        :label="item.value"
                        >{{ item.label }}</el-radio-button
                      >
                    </el-radio-group>
                  </div>

                  <div class="nomargin">{{ weekType | state1 }}销售额</div>
                  <div
                    class="content"
                    style="font-weight: bold; font-size: 20px"
                  >
                    <count-to
                      :start-val="0"
                      :end-val="dateList.saleAmount"
                      :duration="duration"
                      :decimals="decimals"
                    />
                    万
                  </div>
                  <div class="content" style="font-size: 14px">
                    同比：{{ dateList.saleAmountYoy }}%
                  </div>
                  <div class="content" style="font-size: 14px">
                    环比：{{ dateList.saleAmountChain }}%
                  </div>
                  <div class="content" style="margin: 10px 0">
                    <progressYear
                      :progressValue="dateList.targetCompletionRate"
                    />
                  </div>
                  <div class="content">
                    销售目标：
                    <count-to
                      :start-val="0"
                      :end-val="dateList.salesTarget"
                      :duration="duration"
                      :decimals="decimals"
                    />
                    万
                  </div>
                  <div class="nomargin">
                    总店铺运营数：{{ dateList.shopCount }}家
                  </div>
                </el-card>
              </el-col>
              <el-col :span="10">
                <el-card>
                  <panel-group-date
                    @handleSetLineChartData="handleSetLineChartData"
                    :biNumberItem="dateList"
                  />
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card>
                  <div
                    slot="header"
                    style="display: flex; justify-content: space-between"
                  >
                    <span
                      ><i class="el-icon-collection"></i
                      >{{ query.brandList + " " }}
                      {{ weekType | state1 }}平台转化</span
                    >
                    <el-radio-group
                      v-model="weekType"
                      size="mini"
                      @change="getweekselectSaleSingle(weekType)"
                    >
                      <el-radio-button
                        v-for="(item, index) in weekArr"
                        :key="index"
                        :label="item.value"
                        >{{ item.label }}</el-radio-button
                      >
                    </el-radio-group>
                  </div>
                  <funnelDate :id="'funnelDate'" :chartData="funnelDateList" />
                </el-card>
              </el-col>
            </el-row>
          </section>

          <section id="section3">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="6">
                <el-card>
                  <div
                    slot="header"
                    style="display: flex; justify-content: space-between"
                  >
                    <span
                      ><i class="el-icon-collection"></i>
                      {{ query.brandList + " " }}运营监控</span
                    >
                    <el-radio-group v-model="dateType" size="mini">
                      <el-radio-button
                        v-for="(item, index) in typeArr"
                        :key="index"
                        :label="item.value"
                        >{{ item.label }}</el-radio-button
                      >
                    </el-radio-group>
                  </div>

                  <div class="nomargin">{{ dateType | state1 }}销售额</div>
                  <div
                    class="content"
                    style="font-weight: bold; font-size: 20px"
                  >
                    <count-to
                      :start-val="0"
                      :end-val="biNumberItem.saleAmount"
                      :duration="duration"
                      :decimals="decimals"
                    />
                    万
                  </div>
                  <div class="content" style="font-size: 14px">
                    同比：{{ biNumberItem.saleAmountYoy }}%
                  </div>
                  <div class="content" style="font-size: 14px">
                    环比：{{ biNumberItem.saleAmountChain }}%
                  </div>
                  <div class="content" style="margin: 10px 0">
                    <progressYear
                      :progressValue="biNumberItem.targetCompletionRate"
                    />
                  </div>
                  <div class="content">
                    销售目标：
                    <count-to
                      :start-val="0"
                      :end-val="biNumberItem.salesTarget"
                      :duration="duration"
                      :decimals="decimals"
                    />
                    万
                  </div>
                  <div class="nomargin">
                    总店铺运营数：{{ biNumberItem.shopCount }}家
                  </div>
                </el-card>
              </el-col>
              <el-col :span="18">
                <el-card>
                  <panel-group
                    @handleSetLineChartData="handleSetLineChartData"
                    :biNumberItem="biNumberItem"
                  />
                </el-card>
              </el-col>
            </el-row>
          </section>

          <section id="section4">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="18">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{
                            brandList.join(" ") + " "
                          }}整体销售趋势（销售额/达成率）</span
                        >
                      </div>
                      <MinChart
                        :id="'echartTarget'"
                        :minchartData="echartDataMin"
                        height="410px"
                        width="100%"
                      />
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{ brandList.join(" ") + " " }}店铺销售额占比</span
                        >
                      </div>
                      <PieChart
                        :id="'PieChart'"
                        height="410px"
                        :chartData="PieChartData"
                      />
                    </el-card>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </section>

          <section id="section10">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{ brandList.join(" ") + " " }}销售额 VS 客单价</span
                        >
                      </div>
                      <SelectChart
                        :id="'Amount'"
                        :minchartData="otherechartDataMin"
                        height="350px"
                        width="100%"
                      />
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{ brandList.join(" ") + " " }}退款率 VS 加购率</span
                        >
                      </div>
                      <refundChart
                        :id="'refundChart'"
                        :minchartData="otherechartDataMin"
                        height="350px"
                        width="100%"
                      />
                    </el-card>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </section>

          <section id="section11">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{ brandList.join(" ") + " " }}访客数 VS 转化率</span
                        >
                      </div>
                      <percentChart
                        :id="'percentChart'"
                        :minchartData="otherechartDataMin"
                        height="350px"
                        width="100%"
                      />
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <div
                        slot="header"
                        class="card-box"
                        style="display: flex; justify-content: space-between"
                      >
                        <span
                          ><i class="el-icon-collection"></i>
                          {{ brandList.join(" ") + " " }}获客成本 VS
                          uv价值</span
                        >
                      </div>
                      <uvChart
                        :id="'uvChart'"
                        :minchartData="otherechartDataMin"
                        height="350px"
                        width="100%"
                      />
                    </el-card>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </section>

          <section id="section12">
            <el-row :gutter="10" style="margin-bottom: 16px">
              <el-col :span="12">
                <el-card>
                  <div
                    slot="header"
                    class="card-box"
                    style="display: flex; justify-content: space-between"
                  >
                    <span
                      ><i class="el-icon-collection"></i>
                      {{ brandList.join(" ") + " " }}平台访客转化</span
                    >
                  </div>
                  <!-- <funnelWeek
                  :id="'funnelYearList'"
                  :chartData="funnelYearList"
                /> -->
                  <funnelDate
                    style="left: 120px; top: 20px"
                    :id="'funnelYearList'"
                    :chartData="funnelYearList"
                    :height="'350px'"
                  />
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card>
                  <div
                    slot="header"
                    class="card-box"
                    style="display: flex; justify-content: space-between"
                  >
                    <span
                      ><i class="el-icon-collection"></i>
                      {{ brandList.join(" ") + " " }}付费转化分析</span
                    >
                  </div>
                  <funnelDate
                    style="left: 120px; top: 20px"
                    :id="'funnelmarketingList'"
                    :chartData="funnelmarketingList"
                    :height="'350px'"
                  />
                </el-card>
              </el-col>
            </el-row>
          </section>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane label="商品监控" name="1">
        <Shop v-if="activeName == 1" :query="query" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import {
  selectOperationsSummary,
  selectChannelConversion,
  selectTXSaleTargetStatistics,
  selectTXOtherDataStatistics,
  selectShopSaleAmountRatio,
} from "@/api/sale/BiTbSaleDwd";
import //
"@/api/sale/BiSaleMarketingDwd";
import {
  //饼图
  brandSaleAmount,
  //环比
  channelSaleAmountYoy,
} from "@/api/sale/BiSaleAmount";
import { getCache } from "@/api/monitor/cache";
// import echarts from "echarts";
import * as echarts from "echarts/lib/echarts.js";
require("echarts/extension/bmap/bmap");
import "echarts/map/js/china.js"; //引入中国地图数据
import city from "echarts/map/json/china-cities.json";
import date from "./day/date.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";

import refundChart from "@/views/sale/taobao/Chart/refundChart.vue";
import uvChart from "@/views/sale/taobao/Chart/uvChart.vue";
import percentChart from "@/views/sale/taobao/Chart/percentChart.vue";
import SelectChart from "@/views/sale/taobao/Chart/SelectChart.vue";
import MinChart from "@/views/sale/taobao/Chart/MinChart.vue";
import MixChart from "./Chart/MixChart.vue";
// import funnel from "./Chart/funnel.vue";
import funnelDate from "@/views/sale/taobao/Chart/funnelDate.vue";
import funnelWeek from "@/views/sale/taobao/Chart/funnelWeek.vue";
import timeSearch from "./day/day.vue";
import exhaustionDay from "./day/exhaustionDay.vue";
// import waterLevelChart from "./waterLevelChart";
import progressMonthly from "./components/progressMonthly";
import progressYear from "./components/progressYear";
import card from "./Chart/card.vue";

// import channel from "@/views/sale/channel/index.vue";
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import PanelGroupII from "./components/PanelGroupII";
import PanelGroupDate from "./components/PanelGroupDate";
import PanelGroupWeek from "./components/PanelGroupWeek";
// import LineChart from './components/LineChart'
import chartDataRaddar from "./components/chartDataRaddar";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";

import Shop from "./Shop/index.vue";
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";

import CountTo from "vue-count-to";
const lineChartData = {};

export default {
  name: "Admin",
  dicts: [
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_pp",
  ],
  components: {
    CountTo,
    chartDataRaddar,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    PanelGroupII,
    PanelGroupDate,
    PanelGroupWeek,
    funnelDate,
    funnelWeek,
    card,
    progressMonthly,
    progressYear,
    // LineChart,

    // RaddarChart,
    PieChart,
    BarChart,

    chartData,
    chartDataI,
    MinChart,
    SelectChart,
    percentChart,
    uvChart,
    refundChart,
    MixChart,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    exhaustionDay,
    date,
    // channel,
    // funnel,
    Shop,
  },
  data() {
    return {
      duration: 500,
      decimals: 2,

      activeName: 0,
      funnelmarketingList: [],
      funnelYearList: [],
      funnelDateList: [],
      funnelWeekList: [],
      //BI指标数据
      biNumberItem: {},
      weekList: {},
      dateList: {},
      query: {},
      // 店铺
      cascadeList: [],
      // , "天猫", "vfu运动旗舰店"
      brandList: ["VFU"],
      typeArr: [
        { value: "month", label: "MTD" },
        { value: "quarterly", label: "QTD" },
        { value: "year", label: "YTD" },
      ],
      dateType: "month",

      weekArr: [
        { value: "date", label: "日" },
        { value: "week", label: "周" },
      ],
      weekType: "date",
      //
      barChartData: {
        columns: [],
        rows: [],
      },
      //环比
      PieData: [],
      //趋势图
      skcitemData: [],
      //饼图
      PieChartData: {
        // order: {
        xData: [],
        female: [],
        // male: [],
        // average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      otherechartDataMin: {
        // order: {
        xData: [],
        // female: [],
        // male: [],
        // average: [],
      },
      echartData: {
        value: 0,
        name: "",
        bg: "",
      },
      echartDataquarterly: {
        value: 0,
        name: "",
        bg: "",
      },
      echartDatamonthly: {
        value: 0,
        name: "",
        bg: "",
      },

      //品类属性
      itemType: [],
      //价格带
      list: [],
      //多选品类
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [], // 库存名称列表

      //雷达图
      echartDataRaddar: [],
      //总览数据
      itemData: {},
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        // property: "salesAmount",
        // firstLevelList: null,
        // secondLevelList: null,
        // threeLevelList: null,
      },
      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "一级",

      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 280,
      itemHeight: window.innerHeight - 680,
      shopListHeight: window.innerHeight - 570,

      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      //传递数据
      // echartData: {
      //   columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
      //   rows: [],
      // },
      highlightedSku: ["库存总金额", "产品库存总金额", "配件库存总金额"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "销售目标", "销售额", "达成率"],
        rows: [],
      },
      //时间
      dayActive: 15,
      monthActive: false,
      timeArr: [
        // { value: "2", label: "昨天" },
        { value: "15", label: "最近15天" },
        // { value: "30", label: "最近30天" },
        { value: "365", label: "月" },
        { value: "1", label: "日" },
      ],
      timeGap: { startTime: "", endTime: "" },

      loading: false,
      //店铺名称
      shopName: "",
      mapData: [],
      lineChartData: lineChartData.newVisitis,
    };
  },
  created() {
    this.getList();

    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },
  filters: {
    state1(string) {
      if (string == "date") {
        return "昨日";
      }
      if (string == "week") {
        return "本周";
      }
      if (string == "month") {
        return "本月";
      }
      if (string == "quarterly") {
        return "本季";
      }
      if (string == "year") {
        return "本年";
      }
      // if (int == 2) { return "审批通过" };
    },
  },
  // mounted() {
  //   this.$store.dispatch("app/toggleSideBarHide", fa);
  // },
  watch: {
    brandList: {
      handler: function (newnew, oldold) {
        this.query = {
          brandList: this.brandList,

          dateType: this.dateType,
        };
        if (!this.query.brandList) {
          return;
        }
        //经营概况(日和周)
        this.getweekselectSaleSingle(this.weekType);
        //运营监控(月季年)
        this.getselectSaleSingle(this.dateType);

        this.getselectSaleTargetStatistics();
        this.getselectTXOtherDataStatistics();
        this.getskuBySkcSaleList();
        this.getselectChannelConversion(this.query);
      },
      deep: true,
      immediate: true,
    },
    dateType: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        this.query = {
          brandList: this.brandList,
          // brand: this.brandList[0],
          // channel: this.brandList[1],
          dateType: this.dateType,
        };
        if (!this.query.brandList) {
          return;
        }

        //运营监控(月季年)
        this.getselectSaleSingle(this.dateType);

        this.getselectSaleTargetStatistics();
        this.getselectTXOtherDataStatistics();
        this.getskuBySkcSaleList();
        this.getselectChannelConversion(this.query);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    //经营概况
    this.getselectSaleSingle(this.weekType);
    window.addEventListener("scroll", this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },

  methods: {
    formatNumber(number) {
      // 将数字保留两位小数，并转为字符串
      const numberStr = number.toFixed(2);

      // 分割整数部分和小数部分
      const [integerPart, decimalPart] = numberStr.split(".");

      // 将整数部分按千分位分隔
      const integerPartWithCommas = integerPart.replace(
        /\B(?=(\d{3})+(?!\d))/g,
        ","
      );

      // 拼接整数部分和小数部分
      return integerPartWithCommas + "." + (decimalPart || "00");
    },
    handleClick(tab, event) {},
    //指标点击回传
    handleSetLineChartData(type) {},

    getselectSaleTargetStatistics() {
      selectTXSaleTargetStatistics(this.query).then((response) => {
        // this.queryParams = {};
        // this.queryParams.brandList = this.brandList;
        // // this.queryParams.channel = this.brandList[1];
        // this.queryParams.dataYear = response[response.length - 1].dataYear;
        // this.queryParams.dataMonth = response[response.length - 1].dataMonth;
        // if (response[response.length - 1].dataDate) {
        //   this.queryParams.dataDate = response[response.length - 1].dataDate;
        // }

        response.forEach((item, index) => {
          item.id = index;
        });
        this.skcitemData = response;
        this.echartDataMin.xData = response.map((item) => item.dataDateUnit);
        //销售目标
        this.echartDataMin.female = response.map((item) =>
          item.salesTarget ? item.salesTarget : 0
        );
        //销售额
        this.echartDataMin.male = response.map((item) => item.saleAmount);
        //达成率
        this.echartDataMin.average = response.map(
          (item) => item.completionRate
        );
        //客单价
        // this.echartDataMin.avgOrderValue = response.map(
        //   (item) => item.customerUnitPrice
        // );
        // //访客数
        // this.echartDataMin.visitorCount = response.map(
        //   (item) => item.visitorCount
        // );
        // //转化率
        // this.echartDataMin.paymentConversionRate = response.map(
        //   (item) => item.paymentConversionRate
        // );
        // //获客成本
        // this.echartDataMin.customerAcquisitionCost = response.map(
        //   (item) => item.customerAcquisitionCost
        // );
        // //uv价值
        // this.echartDataMin.uvValue = response.map((item) => item.uvValue);
        // //退款率
        // this.echartDataMin.refundRate = response.map((item) => item.refundRate);
        // //加购率
        // this.echartDataMin.cartRate = response.map((item) => item.cartRate);
      });
    },
    getselectTXOtherDataStatistics() {
      selectTXOtherDataStatistics(this.query).then((response) => {
        // this.queryParams = {};
        // this.queryParams.brandList = this.brandList;
        // // this.queryParams.channel = this.brandList[1];
        // this.queryParams.dataYear = response[response.length - 1].dataYear;
        // this.queryParams.dataMonth = response[response.length - 1].dataMonth;
        // if (response[response.length - 1].dataDate) {
        //   this.queryParams.dataDate = response[response.length - 1].dataDate;
        // }

        response.forEach((item, index) => {
          item.id = index;
        });
        this.skcitemData = response;
        this.otherechartDataMin.xData = response.map(
          (item) => item.dataDateUnit
        );
        // //销售目标
        // this.echartDataMin.female = response.map((item) =>
        //   item.saleTarget ? item.saleTarget : null
        // );
        //销售额
        this.otherechartDataMin.male = response.map((item) => item.saleAmount);
        // //达成率
        // this.echartDataMin.average = response.map(
        //   (item) => item.completionRate
        // );
        //客单价
        this.otherechartDataMin.avgOrderValue = response.map(
          (item) => item.customerUnitPrice
        );
        //访客数
        this.otherechartDataMin.visitorCount = response.map(
          (item) => item.visitorCount
        );
        //转化率
        this.otherechartDataMin.paymentConversionRate = response.map(
          (item) => item.paymentConversionRate
        );
        //获客成本
        this.otherechartDataMin.customerAcquisitionCost = response.map(
          (item) => item.customerAcquisitionCost
        );
        //uv价值
        this.otherechartDataMin.uvValue = response.map((item) => item.uvValue);
        //退款率
        this.otherechartDataMin.refundRate = response.map(
          (item) => item.refundRate
        );
        //加购率
        this.otherechartDataMin.cartRate = response.map(
          (item) => item.cartRate
        );

        // this.barLineChart = {
        //   columns: ["品类", "获客成本", "uv价值"],
        //   rows: [],
        // };

        // response.forEach((item) => {
        //   this.barLineChart.rows.push({
        //     品类: item.category,
        //     获客成本: item.customerAcquisitionCost,
        //     uv价值: item.uvValue,
        //     // 达成率: item.completeRate ? item.completeRate : 0,
        //   });
        // });
      });
    },

    //饼图
    getskuBySkcSaleList() {
      // if (this.query.dateType == "month") {
      // this.queryParams.dateType = "date";
      // } else {
      //   this.queryParams.dateType = "month";
      // }

      selectShopSaleAmountRatio(this.query).then((response) => {
        console.log(JSON.stringify(response));
        if (response.length < 1) {
          return;
        }

        response.forEach((item, index) => {
          item.id = index;
        });
        // this.skcitemData = response;
        this.PieData = response;
        // this.getchannelSaleAmountYoy(this.PieData[0].shopName);
        if (response) {
          let row = [];
          response.forEach((item) => {
            row.push({
              value: item.saleAmount,
              name: item.shopName,
            });
          });
          // this.PieChartData.female
          this.PieChartData.xData = response.map((item) => item.shopName);
          this.PieChartData.female = row;
        }
      });
    },
    //运营监控(月季年)
    getselectChannelConversion(obj) {
      // this.funnelDateList = [];
      this.funnelYearList = [];
      this.funnelmarketingList = [];
      selectChannelConversion(obj).then((response) => {
        if (response) {
          if (obj.dateType == "date" || obj.dateType == "week") {
            let row = [];
            row.push({
              name: "平台总访客数",

              values: response.visitors,
              yoy: response.visitorsYoy,
              // twoname: "同比",
              // twoyoy: response.visitorsYoy,
            });
            row.push({
              name: "收藏加购人数",
              values: response.collectAddPurchasesPeoNum,
              yoy: response.collectAddPurchasesPeoNumYoy,
              twoname: "加购率",
              twoyoy: response.addPurchasesRate,
            });
            row.push({
              name: "支付人数",
              values: response.payBuyers,
              yoy: response.payBuyersYoy,
              twoname: "支付转化率",
              twoyoy: response.payConversionRate,
            });
            // this.funnelDateList = row;
          } else {
            let row = [];
            row.push({
              name: "平台总访客数",

              values: response.visitors,
              yoy: response.visitorsYoy,
              // twoname: "同比",
              // twoyoy: response.visitorsYoy,
            });
            row.push({
              name: "收藏加购人数",
              values: response.collectAddPurchasesPeoNum,
              yoy: response.collectAddPurchasesPeoNumYoy,
              twoname: "加购率",
              twoyoy: response.addPurchasesRate,
            });
            row.push({
              name: "支付人数",
              values: response.payBuyers,
              yoy: response.payBuyersYoy,
              twoname: "支付转化率",
              twoyoy: response.payConversionRate,
            });
            this.funnelYearList = row;

            let list = [];

            list.push({
              name: "推广付费点击量",

              values: response.marketingClick,
              yoy: response.marketingClickYoy,
              // twoname: "同比",
              // twoyoy: response.marketingclickYoy,
            });
            list.push({
              name: "推广收藏加购人数",
              values: response.marketingCartFavorite,
              yoy: response.marketingCartFavoriteYoy,
              twoname: "加购率",
              twoyoy: response.marketingCartRate,
            });
            list.push({
              name: "推广支付人数",
              values: response.marketingPaidCustomers,
              yoy: response.marketingPaidCustomersYoy,
              twoname: "支付转化率",
              twoyoy: response.marketingPayConversionRate,
            });
            this.funnelmarketingList = list;
          }
        }
      });
    },
    //经营概况(日和周)
    getweekselectSaleSingle(value) {
      let obj = {
        brandList: this.brandList,
        //   brand: this.brandList[0],
        //   channel: this.brandList[1],
        dateType: value,
      };
      selectOperationsSummary(obj).then((response) => {
        if (response) {
          if (value == "date" || value == "week") {
            this.dateList = response;
            this.getweekselectChannelConversion(obj);
          }
        }
      });
    },
    //经营概况(日和周)
    getweekselectChannelConversion(obj) {
      this.funnelDateList = [];
      // this.funnelYearList = [];
      // this.funnelmarketingList = [];
      selectChannelConversion(obj).then((response) => {
        if (response) {
          if (obj.dateType == "date" || obj.dateType == "week") {
            let row = [];
            row.push({
              name: "平台总访客数",

              values: response.visitors,
              yoy: response.visitorsYoy,
              // twoname: "同比",
              // twoyoy: response.visitorsYoy,
            });
            row.push({
              name: "收藏加购人数",
              values: response.collectAddPurchasesPeoNum,
              yoy: response.collectAddPurchasesPeoNumYoy,
              twoname: "加购率",
              twoyoy: response.addPurchasesRate,
            });
            row.push({
              name: "支付人数",
              values: response.payBuyers,
              yoy: response.payBuyersYoy,
              twoname: "支付转化率",
              twoyoy: response.payConversionRate,
            });
            this.funnelDateList = row;
          } else {
            // this.biNumberItem = response;
            // this.getselectChannelConversion(this.query);
          }
        }
      });
    },
    //运营监控(月季年)
    getselectSaleSingle(value) {
      let obj = {
        brandList: this.brandList,
        //   brand: this.brandList[0],
        //   channel: this.brandList[1],
        dateType: value,
      };
      selectOperationsSummary(obj).then((response) => {
        if (response) {
          if (value == "date" || value == "week") {
            this.dateList = response;
            this.getselectChannelConversion(obj);
            this.getselectChannelConversion(this.query);
            // } else if (value == "week") {
            //   this.weekList = response;
            //   this.getselectChannelConversion(obj);
          } else {
            this.biNumberItem = response;
            this.getselectChannelConversion(this.query);
          }
        }
      });
      return;
      // if (value != "date" || value != "week") {
      //   return;
      // }
      selectChannelConversion(obj).then((response) => {
        if (response) {
          if (value == "date") {
            this.funnelDateList = [
              {
                name: "平台总访客数",
                value: response.visitors,
                yoy: response.visitorsYoy,
                twoname: "",
                twoyoy: "",
              },
              {
                name: "收藏加购人数",
                value: response.collectAddPurchasesPeoNum,
                yoy: response.collectAddPurchasesPeoNumYoy,
                twoname: "加购率",
                twoyoy: response.addPurchasesRate,
              },
              {
                name: "支付人数",
                value: response.payBuyers,
                yoy: response.payBuyersYoy,
                twoname: "支付转化率",
                twoyoy: response.payConversionRate,
              },
            ];
          } else if (value == "week") {
            this.funnelWeekList = [
              {
                name: "平台总访客数",
                value: response.visitors,
                yoy: response.visitorsYoy,
                twoname: "",
                twoyoy: "",
              },
              {
                name: "收藏加购人数",
                value: response.collectAddPurchasesPeoNum,
                yoy: response.collectAddPurchasesPeoNumYoy,
                twoname: "加购率",
                twoyoy: response.addPurchasesRate,
              },
              {
                name: "支付人数",
                value: response.payBuyers,
                yoy: response.payBuyersYoy,
                twoname: "支付转化率",
                twoyoy: response.payConversionRate,
              },
            ];
          }
        }
      });
    },

    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        let result = this.transformData(response);
        // this.brandList = [result[0].label, result[0].children[0].label];
        // this.brandList = [result[0].label];
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        // let channel = item.brand;
        // let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            // children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        // let channelIndex = result[brandIndex].children.findIndex(
        //   (channelObj) => channelObj.label === channel
        // );
        // if (channelIndex === -1) {
        //   result[brandIndex].children.push({
        //     label: channel,
        //     value: channel,
        //     // children: [],
        //   });
        //   channelIndex = result[brandIndex].children.length - 1;
        // }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        // let shopIndex = result[brandIndex].children[
        //   channelIndex
        // ].children.findIndex((shopObj) => shopObj.label === shopName);
        // if (shopIndex === -1) {
        //   result[brandIndex].children[channelIndex].children.push({
        //     label: shopName,
        //     value: shopName,
        //     // children: []
        //   });
        // }
      });

      return result;
    },
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    /** 查缓存询信息 */
    getList() {},
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载分析销售监控数据，请稍候！");
    },
    //地区Top20
    getTopSal(param) {},
  },
};
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}
.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}
.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}
.nomargin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 10px;
  margin: 10px 0;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  // padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 16px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
// .train-tree-cascader {
//   height: 500px !important;
// }

// .el-scrollbar__wrap {
//   overflow: initial !important;
// }
</style>
public class BiOperationsSummary {

    /** 销售额 */
    @Excel(name = "销售额")
    private Double saleAmount;
    private Double saleAmountChain;//环比
    private Double saleAmountYoy;//同比

    /** 退款金额 */
    @Excel(name = "退款金额")
    private Double returnAmount;
    private Double returnAmountChain;//环比
    private Double returnAmountYoy;//同比

    /** 退款率 */
    @Excel(name = "退款率")
    private Double returnAmountRate;
    private Double returnAmountRateChain;//环比
    private Double returnAmountRateYoy;//同比

    /** 净销售额 */
    @Excel(name = "净销售额")
    private Double netSalesAmount;
    private Double netSalesAmountChain;//环比
    private Double netSalesAmountYoy;//同比

    /** 营销花费 */
    @Excel(name = "营销花费")
    private Double marketingAmount;
    private Double marketingAmountChain;//环比
    private Double marketingAmountYoy;//同比

    /** 下单数 */
    @Excel(name = "下单数")
    private Integer ordersNumber;
    private Double ordersNumberChain;//环比
    private Double ordersNumberYoy;//同比

    /** 目标金额（万） */
    @Excel(name = "目标金额")
    private Double salesTarget;

    /** 目标达成率 */
    @Excel(name = "目标达成率")
    private Double targetCompletionRate; // 目标达成率;

    /** 店铺运营数 */
    @Excel(name = "店铺运营数")
    private Integer shopCount; // 目标达成率;

    //商品销售成本
    @Excel(name = "商品销售成本")
    private Double saleCostPro;
    private Double saleCostProChain;//环比
    private Double saleCostProYoy;//同比


    /** 客单价 */
    @Excel(name = "客单价")
    private Double customerUnitPrice;
    private Double customerUnitPriceChain;//环比
    private Double customerUnitPriceYoy;//同比


    /** 预计达成金额 */
    @Excel(name = "预计达成金额")
    private Double estimateCompletionAmount;

    /*赠品占比**/
    @Excel(name = "赠品占比")
    private Double complimentaryRatio;
    private Double complimentaryRatioChain;//环比
    private Double complimentaryRatioYoy;//同比

    /*ROI**/
    @Excel(name = "ROI")
    private Double roi;
    private Double roiChain;//环比
    private Double roiYoy;//同比

    /*总访客数**/
    @Excel(name = "总访客数")
    private Integer visitors;
    private Double visitorsChain;//环比
    private Double visitorsYoy;//同比

    /*获客成本**/
    @Excel(name = "获客成本")
    private Double customerAcquisitionCost;
    private Double customerAcquisitionCostChain;//环比
    private Double customerAcquisitionCostYoy;//同比

    /*老客数**/
    @Excel(name = "老客数")
    private Integer payOldBuyers;
    private Double payOldBuyersChain;//环比
    private Double payOldBuyersYoy;//同比

    /*新客数**/
    @Excel(name = "新客数")
    private Integer payNewBuyers;
    private Double payNewBuyersChain;//环比
    private Double payNewBuyersYoy;//同比

    /*老客占比**/
    @Excel(name = "老客占比")
    private Double oldBuyersRatio;
    private Double oldBuyersRatioChain;//环比
    private Double oldBuyersRatioYoy;//同比

    /*新客占比**/
    @Excel(name = "新客占比")
    private Double newBuyersRatio;
    private Double newBuyersRatioChain;//环比
    private Double newBuyersRatioYoy;//同比

    /** 年 */
    @Excel(name = "年")
    private Integer dataYear;

    /** 季 */
    @Excel(name = "季")
    private Integer dataQuarter;

    /** 月 */
    @Excel(name = "月")
    private Integer dataMonth;

    /** 周 */
    @Excel(name = "周")
    private Integer dataWeek;

}
/** 营销付费点击量 */
@Excel(name ="营销付费点击量")private Integer marketingClick;private Double marketingclickYoy;//同比
/** 营销收藏加购人数 */
@Excel(name ="营销收藏加购人数")private Integer marketingcartFavorite;private Double marketingCartFavoriteYoy;//同比
/** 营銷加购人数 */
@Excel(name =“营销加购人数")private Integer marketingCartcount;private Double marketingcartcountYoy://同比
/** 营銷收加购率 */@Excel(name =“营销收藏加购率")private Integer marketingCartFavoriteRate
/** 营销加购率 */@Excel(name =“营销加购率")
private Integer marketingCartRate;
/** 营销支付人数 */@Excel(name ="营销支付人数")private Integer marketingPaidcustomers;private Double marketingPaidCustomersYoy;//同比
/** 营销支付转化率 */
@Excel(name =“营销支付转化率")
private Double marketingPayConversionRate;